import React, { Component } from 'react';
import { connect } from 'dva';
// import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Alert,Input,Button,Badge,Table,Divider  } from 'antd';
// import Login from '@/components/Login';
import styles from './OrderList.less';

const Search = Input.Search;

@connect(({ orderList, loading }) => ({
  orderList,
  submitting: loading.effects['orderList/fetchList'],
}))

class OrderListPage extends Component {
  state = {
    handelArr:[
      {
        id:1,
        name:"全部",
        statu:"",
      },
      {
        id:2,
        name:"未付款",
        statu:"CREATED"
      },
      {
        id:3,
        name:"已发货",
        statu:"SHIPPED",
      },
      {
        id:4,
        name:"已签收",
        statu:"SIGNED"
      }
    ],
    inpVal:"",
    pageSize:10,
    current:1,
    handelIndex:1,
    status:"",
    loading:false,
  };

  getOrderList = ()=>{
    this.setState({
      loading:true
    })
    const { dispatch } = this.props;
    let _this = this;
    if(localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")) && JSON.parse(localStorage.getItem("userInfo")).isAdmin===0){
      dispatch({
        type:'orderList/fetchList',
        payload: {
          pageSize:_this.state.pageSize,
          pageNumber:_this.state.current,
          status:_this.state.status,
          orderNumber:_this.state.inpVal,
        },
      })
    }else{
      dispatch({
        type:'orderList/fetchList',
        payload: {
          pageSize:_this.state.pageSize,
          pageNumber:_this.state.current,
          status:_this.state.status,
          orderNumber:_this.state.inpVal,
          orderUserId:JSON.parse(localStorage.getItem("userInfo"))?JSON.parse(localStorage.getItem("userInfo")).id:null
        },
      })
    }
    setTimeout(()=> {
      this.setState({
        loading:false
      })
    },1000)

  };

  componentDidMount() {
    this.getOrderList();
  };

  handelClick = (id,status) =>{
    console.log(status)
    this.setState({
      handelIndex:id,
      status:status,
      inpVal:"",
    },()=>{
      this.getOrderList();
    })
  };

  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  handleTableChange = (current,pageSize) =>{

    this.setState(
      {
        current,
        pageSize,
      },()=>{
        this.getOrderList();
      }
    )
  };

  getVal = (val)=>{
    this.setState({
      inpVal:val
    },function() {
      this.getOrderList();

    });
  };

  handelChangeSize = (pageSize,pageNumber) =>{
    console.log(pageSize,pageNumber)
      this.setState({
        current:pageSize,
        pageSize:pageNumber
      },() => {
        this.getOrderList();
      })
  };
  goOrderDetail(row,...type){
      // this.props.history.push({
      //   pathname:'/demo/orderdetail',
      //   query:{id:id,status:row.status}
      // })
    this.props.history.push({ pathname:'/demo/orderLook',state:{id : row.id,status:row.status,type:type[0]} })
  };

  render() {
    const { orderList:{pageInfo} } = this.props;
    const { current,pageSize } = this.state
    const columns = [
      {
        dataIndex: '',
        key: 'id1',
        render: (text, record) => {
          return(
            <div className={styles.dateNumber}>
              <p>{text.orderNumber}</p>
              <p>{text.orderDate}</p>
            </div>
          )
        },
      },

      {
        dataIndex: 'orderUserName',
        key: 'id3',
      },
      {
        dataIndex: 'receiveContactName',
        key: 'id5',
      },
      {
        dataIndex: '',
        key: 'id4',
        render: (text, record) => {
          let address = [];

          if(text.receiveProvice&&text.receiveDistrict){
            address.push(text.receiveProvice);
            address.push(text.receiveDistrict);
            address.push(text.receiveCity);
            address=address.join("/")
          }
          return(
            <div className={styles.padMa}>
              <p>{address}</p >
              <p>{text.receiveAddress}</p >
            </div>
          )
        },
      },
      {
        dataIndex: '',
        key: 'id7',
        render: (text, record) => {

            if(text.status === "CREATED"){
              return(
                <span className={styles.statusUnpaid}>未付款</span>
              )
            }else if (text.status === "PAYED"){
              return (
                <span className={styles.status}>已支付</span>

              )
            } else if (text.status === "SHIPPED"){
              return(
                <span className={styles.status}>已发货</span>

              )
            } else if (text.status === "SIGNED"){
              return(
                <span className={styles.statusUnshipped}>已签收</span>
              )
            }
        },
      },
      {
        dataIndex: '',
        key: 'x',
        render: (text, record) => {
          if(JSON.parse(localStorage.getItem("userInfo")).isAdmin===1){
            if(text.status === "SIGNED"|| text.status === "PAYED" ){
              return(
                <div className={styles.action}>
                  <span  onClick={()=>{
                    this.goOrderDetail(text,1)
                  }}>查看</span>
                </div>
              )
            } else if ( text.status === "SHIPPED"){
              return (
                <div className={styles.action}>
                  <span onClick={()=>{
                    this.goOrderDetail(text,0)
                  }}>签收</span>
                  <Divider type="vertical" />
                  <span  onClick={()=>{
                    this.goOrderDetail(text,1)
                  }}>查看</span>
                </div>
                )

            } else if (text.status === "CREATED"){
              return(
                <div className={styles.action}>
                  <span onClick={()=>{
                    this.goOrderDetail(text)
                  }}>付款</span>
                  <Divider type="vertical" />
                  <span  onClick={()=>{
                    this.goOrderDetail(text,1)
                  }}>查看</span>
                </div>
                )

            }else {
              return (
                <div className={styles.action}>
                  {/*<span onClick={()=>{*/}
                    {/*this.goOrderDetail(text)*/}
                  {/*}}>签收</span>*/}
                  {/*<Divider type="vertical" />*/}
                  {/*<span  onClick={()=>{*/}
                    {/*this.goOrderDetail(text)*/}
                  {/*}}>查看</span>*/}
                  {/*<Divider type="vertical" />*/}
                  {/*<span  onClick={()=>{*/}
                    {/*this.goOrderDetail(text)*/}
                  {/*}}>付款</span>*/}
                </div>
              )
            }
          }else{
              if(text.status === "CREATED" || text.status === "SIGNED" || text.status === "SHIPPED"){
                return (
                <div className={styles.action}>
                  <span  onClick={()=>{
                    this.goOrderDetail(text)
                  }}>查看</span>
                </div>
                )
              } else {
                return (
                  <div className={styles.action}>
                <span onClick={()=>{
                  this.goOrderDetail(text)
                }}>发货</span>
                    <Divider type="vertical" />
                    <span  onClick={()=>{
                      this.goOrderDetail(text,1)
                    }}>查看</span>
                  </div>
                )
              }

          }
        },
      },
    ];
    const loading = this.state.loading;
    return (
      <div className={styles.main}>
          <header>
            <h1>订单列表</h1>
            <div className={styles.messHeader}>
              <div className={styles.check}>
                {
                  this.state.handelArr.map(item =>(
                      <span key={item.id} className={item.id===this.state.handelIndex?styles.active:""} onClick={() => this.handelClick(item.id,item.statu)}>{item.name}</span>
                  ))
                }
              </div>
              <div className="search">
                <Search
                  placeholder="请输入订单号查询"
                  onSearch={(val)=>{
                    this.getVal(val)
                  }}
                  style={{ width: 220 }}
                />
              </div>
            </div>
          </header>
        {(localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")) && JSON.parse(localStorage.getItem("userInfo")).isAdmin===1) && <div className={styles.submitAddres}>
            <Button type="primary" onClick={()=>{
              this.props.history.push({
                pathname:'/demo/goodsList',
              })
            }}>去下单>></Button>
        </div>}
        <Table
          loading={loading}
          columns={columns}
          showHeader={false}
          rowKey={record => record.id}
          dataSource={pageInfo && pageInfo.list}
          pagination={{
            current,
            pageSize,
            showSizeChanger:true,
            showQuickJumper:true,
            defaultCurrent: current,
            defaultPageSize: pageSize,
            total: pageInfo && parseInt(pageInfo.total),
            onChange: this.handleTableChange,
            onShowSizeChange:this.handelChangeSize,
          }}
        />
      </div>
    );
  };

}

export default OrderListPage;
